import { cn } from '@/utils/cn';
import { BookOpen, Calendar, User, Heart, Search, Menu, X } from 'lucide-react';
import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

interface BottomNavProps {
  className?: string;
}

export function BottomNav({ className }: BottomNavProps) {
  const navigate = useNavigate();
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const navItems = [
    {
      id: 'books',
      name: '绘本馆',
      icon: BookOpen,
      path: '/books',
      color: 'text-accent-600'
    },
    {
      id: 'activities',
      name: '亲子活动',
      icon: Calendar,
      path: '/activities',
      color: 'text-secondary-600'
    },
    {
      id: 'records',
      name: '阅读记录',
      icon: Heart,
      path: '/records',
      color: 'text-red-500'
    },
    {
      id: 'profile',
      name: '我的',
      icon: User,
      path: '/profile',
      color: 'text-primary-600'
    }
  ];

  const isActive = (path: string) => {
    if (path === '/') return location.pathname === '/';
    return location.pathname.startsWith(path);
  };

  return (
    <>
      {/* 底部导航栏 */}
      <nav className={cn(
        "fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 z-40 md:hidden",
        className
      )}>
        <div className="flex justify-around items-center">
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = isActive(item.path);
            
            return (
              <button
                key={item.id}
                onClick={() => navigate(item.path)}
                className={cn(
                  "flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-200",
                  active 
                    ? "bg-warm-50 text-primary-600 scale-105" 
                    : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"
                )}
              >
                <Icon className={cn("w-6 h-6 mb-1", active && item.color)} />
                <span className={cn("text-xs font-medium", active ? "font-semibold" : "")}>
                  {item.name}
                </span>
              </button>
            );
          })}
        </div>
      </nav>

      {/* 桌面端顶部导航 */}
      <nav className="hidden md:flex items-center justify-between bg-white shadow-sm px-6 py-4">
        <div className="flex items-center space-x-8">
          <div 
            onClick={() => navigate('/')}
            className="text-2xl font-bold text-primary-600 cursor-pointer hover:text-primary-700 transition-colors"
          >
            绘本岛
          </div>
          
          <div className="flex items-center space-x-6">
            {navItems.map((item) => {
              const Icon = item.icon;
              const active = isActive(item.path);
              
              return (
                <button
                  key={item.id}
                  onClick={() => navigate(item.path)}
                  className={cn(
                    "flex items-center space-x-2 px-4 py-2 rounded-xl transition-all duration-200",
                    active 
                      ? "bg-warm-50 text-primary-600 font-semibold" 
                      : "text-gray-600 hover:text-primary-600 hover:bg-warm-50"
                  )}
                >
                  <Icon className={cn("w-5 h-5", active && item.color)} />
                  <span>{item.name}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* 搜索栏 */}
        <div className="flex items-center space-x-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="搜索绘本、活动..."
              className="pl-10 pr-4 py-2 w-64 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent"
            />
          </div>
        </div>
      </nav>

      {/* 移动端顶部搜索栏 */}
      <div className="md:hidden fixed top-0 left-0 right-0 bg-white shadow-sm px-4 py-3 z-40">
        <div className="flex items-center justify-between">
          <div 
            onClick={() => navigate('/')}
            className="text-xl font-bold text-primary-600 cursor-pointer"
          >
            绘本岛
          </div>
          
          <div className="flex items-center space-x-3">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                type="text"
                placeholder="搜索..."
                className="pl-9 pr-3 py-2 w-48 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent text-sm"
              />
            </div>
            
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
            >
              {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* 移动端菜单遮罩 */}
      {isMenuOpen && (
        <div 
          className="md:hidden fixed inset-0 bg-black/50 z-50"
          onClick={() => setIsMenuOpen(false)}
        />
      )}

      {/* 移动端侧边菜单 */}
      <div className={cn(
        "md:hidden fixed top-0 right-0 h-full w-64 bg-white shadow-xl z-50 transform transition-transform duration-300",
        isMenuOpen ? "translate-x-0" : "translate-x-full"
      )}>
        <div className="p-4">
          <div className="flex items-center justify-between mb-6">
            <div className="text-xl font-bold text-primary-600">菜单</div>
            <button
              onClick={() => setIsMenuOpen(false)}
              className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
            >
              <X className="w-6 h-6" />
            </button>
          </div>
          
          <div className="space-y-2">
            {navItems.map((item) => {
              const Icon = item.icon;
              const active = isActive(item.path);
              
              return (
                <button
                  key={item.id}
                  onClick={() => {
                    navigate(item.path);
                    setIsMenuOpen(false);
                  }}
                  className={cn(
                    "w-full flex items-center space-x-3 p-3 rounded-xl transition-all duration-200 text-left",
                    active 
                      ? "bg-warm-50 text-primary-600 font-semibold" 
                      : "text-gray-600 hover:text-primary-600 hover:bg-warm-50"
                  )}
                >
                  <Icon className={cn("w-5 h-5", active && item.color)} />
                  <span>{item.name}</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
}